import { ref, watch } from 'vue';

// 主题类型定义
export type ThemeMode = 'light' | 'dark' | 'fresh' | 'european';

// 主题配置
const themeConfig = {
  light: {
    // 主色调 - 亮色主题使用蓝色系
    '--primary-color': '#1890ff',
    '--primary-light': '#40a9ff',
    '--primary-dark': '#096dd9',

    // 导航栏tab
    '--nav-parent-active': '#c0d0d0',
    '--nav-child-active': '#d5d5d5',

    // 背景色
    '--bg-primary': '#ffffff',
    '--bg-secondary': '#f5f5f5',
    '--bg-tertiary': '#fafafa',

    // 文字颜色
    '--text-primary': '#333333',
    '--text-secondary': '#666666',
    '--text-tertiary': '#999999',
    '--text-light': '#cccccc',

    // 边框颜色
    '--border-color': '#e8e8e8',
    '--border-light': '#f0f0f0',

    // 阴影
    '--shadow-light': '0 2px 8px rgba(0, 0, 0, 0.1)',
    '--shadow-medium': '0 4px 16px rgba(0, 0, 0, 0.15)',
    '--shadow-heavy': '0 8px 32px rgba(0, 0, 0, 0.2)',

    // 卡片背景
    '--card-bg': '#ffffff',
    '--card-hover-bg': '#ffffff',
    '--card-error-bg': '#FEF2F2',

    // 头部背景
    '--header-bg': '#ffffff',
    '--header-border': '#e8e8e8',

    // 侧边栏
    '--sidebar-bg': '#001529',
    '--sidebar-text': '#ffffff',
    '--sidebar-hover': '#1890ff',
    '--sidebar-border': 'rgba(255, 255, 255, 0.1)',
    '--sidebar-action-bg': 'rgba(255, 255, 255, 0.1)',
    '--sidebar-action-border': 'rgba(255, 255, 255, 0.2)',
    '--sidebar-action-hover': 'rgba(255, 255, 255, 0.2)',
    '--sidebar-badge-bg': 'rgba(255, 255, 255, 0.2)',
    '--sidebar-user-border': 'rgba(255, 255, 255, 0.2)',
    '--sidebar-user-hover': 'rgba(255, 255, 255, 0.1)',
    '--sidebar-user-text-secondary': 'rgba(255, 255, 255, 0.6)',

    // 状态颜色
    '--success-color': '#52c41a',
    '--warning-color': '#faad14',
    '--error-color': '#ff4d4f',
    '--info-color': '#1890ff',

    // API方法颜色
    '--api-get-bg': '#e6f7ff',
    '--api-get-color': '#1890ff',
    '--api-post-bg': '#f6ffed',
    '--api-post-color': '#52c41a',
    '--api-put-bg': '#fff7e6',
    '--api-put-color': '#fa8c16',
    '--api-delete-bg': '#fff2f0',
    '--api-delete-color': '#ff4d4f',

    // 表格和列表
    '--table-header-bg': '#f8f9fa',
    '--table-row-hover': '#f8f9fa',
    '--table-row-even': '#fafafa',
    '--list-item-hover': '#f8f9fa',
    '--list-item-active': 'rgba(24, 144, 255, 0.1)',
    '--list-item-active-border': 'rgba(24, 144, 255, 0.2)',

    // 代码块
    '--code-bg': '#f8f9fa',
    '--code-border': '#e8e8e8',
    '--code-header-bg': '#f8f9fa',

    // 模态框
    '--modal-overlay': 'rgba(0, 0, 0, 0.5)',
    '--modal-shadow': '0 8px 32px rgba(0, 0, 0, 0.2)',

    // 表单元素
    '--input-bg': '#ffffff',
    '--input-focus-shadow': '0 0 0 3px rgba(24, 144, 255, 0.1)',
    '--select-bg': '#ffffff',

    // 成员管理
    '--member-item-bg': '#f8f9fa',
    '--member-role-bg': '#e6f7ff',
    '--member-role-color': '#1890ff',

    // 按钮相关颜色
    '--btn-primary-bg': '#722ed1',
    '--btn-text-primary': '#ffffff',
    '--btn-primary-hover-bg': '#9254de',
    '--btn-primary-disabled-bg': '#d9d9d9',
    '--btn-primary-disabled-color': '#bfbfbf',
    '--btn-secondary-bg': '#ffffff',
    '--btn-secondary-color': '#333333',
    '--btn-secondary-hover-bg': '#f5f5f5',
    '--btn-secondary-hover-color': '#333333',
    '--btn-success-bg': '#52c41a',
    '--btn-success-color': '#ffffff',
    '--btn-success-hover-bg': '#73d13d',
    '--btn-warning-bg': '#faad14',
    '--btn-warning-color': '#ffffff',
    '--btn-warning-hover-bg': '#ffc53d',
    '--btn-error-bg': '#ff4d4f',
    '--btn-error-color': '#ffffff',
    '--btn-error-hover-bg': '#ff7875',

    // 玻璃效果
    '--primary-glass': 'rgba(114, 46, 209, 0.1)',
    '--primary-glass-hover': 'rgba(114, 46, 209, 0.2)',

    // 输入框相关
    '--input-border': '#d9d9d9',
    '--input-focus-border': '#722ed1',
    '--input-disabled-bg': '#f5f5f5',
    '--input-disabled-text': '#bfbfbf',

    // 悬浮状态颜色
    '--hover-bg': '#e6f7ff',
    '--hover-border': '#1890ff',
    '--hover-shadow': '0 4px 12px rgba(24, 144, 255, 0.15)',
    '--hover-transform': 'translateX(4px)',
    '--hover-scale': '1.0',
  },
  dark: {
    // 主色调 - 暗色主题使用紫色系
    '--primary-color': '#722ed1',
    '--primary-light': '#9254de',
    '--primary-dark': '#531dab',

    // 导航栏tab
    '--nav-parent-active': '#606060',
    '--nav-child-active': '#808080',

    // 背景色 - 黑灰色系
    '--bg-primary': '#0f0f0f',
    '--bg-secondary': '#1a1a1a',
    '--bg-tertiary': '#262626',

    // 文字颜色
    '--text-primary': '#f0f0f0',
    '--text-secondary': '#cccccc',
    '--text-tertiary': '#999999',
    '--text-light': '#666666',

    // 边框颜色
    '--border-color': '#333333',
    '--border-light': '#262626',

    // 阴影
    '--shadow-light': '0 2px 8px rgba(0, 0, 0, 0.3)',
    '--shadow-medium': '0 4px 16px rgba(0, 0, 0, 0.4)',
    '--shadow-heavy': '0 8px 32px rgba(0, 0, 0, 0.5)',

    // 卡片背景
    '--card-bg': '#1a1a1a',
    '--card-hover-bg': '#262626',
    '--card-error-bg': '#4c4944ff',

    // 头部背景
    '--header-bg': '#1a1a1a',
    '--header-border': '#333333',

    // 侧边栏
    '--sidebar-bg': '#0f0f0f',
    '--sidebar-text': '#f0f0f0',
    '--sidebar-hover': '#177ddc',
    '--sidebar-border': 'rgba(255, 255, 255, 0.1)',
    '--sidebar-action-bg': 'rgba(255, 255, 255, 0.1)',
    '--sidebar-action-border': 'rgba(255, 255, 255, 0.2)',
    '--sidebar-action-hover': 'rgba(255, 255, 255, 0.2)',
    '--sidebar-badge-bg': 'rgba(255, 255, 255, 0.2)',
    '--sidebar-user-border': 'rgba(255, 255, 255, 0.2)',
    '--sidebar-user-hover': 'rgba(255, 255, 255,  0.1)',
    '--sidebar-user-text-secondary': 'rgba(255, 255, 255, 0.6)',

    // 状态颜色
    '--success-color': '#49aa19',
    '--warning-color': '#d89614',
    '--error-color': '#d32029',
    '--info-color': '#177ddc',

    // API方法颜色
    '--api-get-bg': 'rgba(73, 170, 25, 0.2)',
    '--api-get-color': '#49aa19',
    '--api-post-bg': 'rgba(23, 125, 220, 0.2)',
    '--api-post-color': '#177ddc',
    '--api-put-bg': 'rgba(216, 150, 20, 0.2)',
    '--api-put-color': '#d89614',
    '--api-delete-bg': 'rgba(211, 32, 41, 0.2)',
    '--api-delete-color': '#d32029',

    // 表格和列表
    '--table-header-bg': '#262626',
    '--table-row-hover': '#262626',
    '--table-row-even': '#1a1a1a',
    '--list-item-hover': '#262626',
    '--list-item-active': 'rgba(23, 125, 220, 0.2)',
    '--list-item-active-border': 'rgba(23, 125, 220, 0.3)',

    // 代码块
    '--code-bg': '#1a1a1a',
    '--code-border': '#333333',
    '--code-header-bg': '#262626',

    // 模态框
    '--modal-overlay': 'rgba(0, 0, 0, 0.7)',
    '--modal-shadow': '0 8px 32px rgba(0, 0, 0, 0.5)',

    // 表单元素
    '--input-bg': '#1a1a1a',
    '--input-focus-shadow': '0 0 0 3px rgba(23, 125, 220, 0.2)',
    '--select-bg': '#1a1a1a',

    // 成员管理
    '--member-item-bg': '#262626',
    '--member-role-bg': 'rgba(23, 125, 220, 0.2)',
    '--member-role-color': '#177ddc',

    // 按钮相关颜色
    '--btn-primary-bg': '#9254de',
    '--btn-text-primary': '#ffffff',
    '--btn-primary-hover-bg': '#b37feb',
    '--btn-primary-disabled-bg': '#434343',
    '--btn-primary-disabled-color': '#666666',
    '--btn-secondary-bg': '#1a1a1a',
    '--btn-secondary-color': '#f0f0f0',
    '--btn-secondary-hover-bg': '#262626',
    '--btn-secondary-hover-color': '#f0f0f0',
    '--btn-success-bg': '#49aa19',
    '--btn-success-color': '#ffffff',
    '--btn-success-hover-bg': '#73d13d',
    '--btn-warning-bg': '#d89614',
    '--btn-warning-color': '#ffffff',
    '--btn-warning-hover-bg': '#ffc53d',
    '--btn-error-bg': '#d32029',
    '--btn-error-color': '#ffffff',
    '--btn-error-hover-bg': '#ff7875',

    // 玻璃效果
    '--primary-glass': 'rgba(146, 84, 222, 0.2)',
    '--primary-glass-hover': 'rgba(146, 84, 222, 0.3)',

    // 输入框相关
    '--input-border': '#434343',
    '--input-focus-border': '#9254de',
    '--input-disabled-bg': '#262626',
    '--input-disabled-text': '#666666',

    // 悬浮状态颜色
    '--hover-bg': '#1a1a2e',
    '--hover-border': '#722ed1',
    '--hover-shadow': '0 4px 12px rgba(146, 84, 222, 0.25)',
    '--hover-transform': 'translateX(4px)',
    '--hover-scale': '1.0',
  },
  fresh: {
    // 主色调 - 清新自然主题使用绿色系
    '--primary-color': '#52c41a',
    '--primary-light': '#73d13d',
    '--primary-dark': '#389e0d',

    // 导航栏tab
    '--nav-parent-active': '#d9f7be',
    '--nav-child-active': '#f6ffed',

    // 背景色 - 清新自然色系
    '--bg-primary': '#f6ffed',
    '--bg-secondary': '#f0f9ff',
    '--bg-tertiary': '#e6f7ff',

    // 文字颜色
    '--text-primary': '#2f4f2f',
    '--text-secondary': '#5a7c5a',
    '--text-tertiary': '#8a9a8a',
    '--text-light': '#b3c2b3',

    // 边框颜色
    '--border-color': '#d9f7be',
    '--border-light': '#f0f9ff',

    // 阴影
    '--shadow-light': '0 2px 8px rgba(82, 196, 26, 0.1)',
    '--shadow-medium': '0 4px 16px rgba(82, 196, 26, 0.15)',
    '--shadow-heavy': '0 8px 32px rgba(82, 196, 26, 0.2)',

    // 卡片背景
    '--card-bg': '#ffffff',
    '--card-hover-bg': '#f6ffed',
    '--card-error-bg': '#fff2f0',

    // 头部背景
    '--header-bg': '#f6ffed',
    '--header-border': '#d9f7be',

    // 侧边栏
    '--sidebar-bg': '#2f4f2f',
    '--sidebar-text': '#f6ffed',
    '--sidebar-hover': '#52c41a',
    '--sidebar-border': 'rgba(255, 255, 255, 0.1)',
    '--sidebar-action-bg': 'rgba(255, 255, 255, 0.1)',
    '--sidebar-action-border': 'rgba(255, 255, 255, 0.2)',
    '--sidebar-action-hover': 'rgba(255, 255, 255, 0.2)',
    '--sidebar-badge-bg': 'rgba(255, 255, 255, 0.2)',
    '--sidebar-user-border': 'rgba(255, 255, 255, 0.2)',
    '--sidebar-user-hover': 'rgba(255, 255, 255, 0.1)',
    '--sidebar-user-text-secondary': 'rgba(255, 255, 255, 0.6)',

    // 状态颜色
    '--success-color': '#52c41a',
    '--warning-color': '#faad14',
    '--error-color': '#ff4d4f',
    '--info-color': '#1890ff',

    // API方法颜色
    '--api-get-bg': '#f6ffed',
    '--api-get-color': '#52c41a',
    '--api-post-bg': '#e6f7ff',
    '--api-post-color': '#1890ff',
    '--api-put-bg': '#fff7e6',
    '--api-put-color': '#fa8c16',
    '--api-delete-bg': '#fff2f0',
    '--api-delete-color': '#ff4d4f',

    // 表格和列表
    '--table-header-bg': '#f0f9ff',
    '--table-row-hover': '#f0f9ff',
    '--table-row-even': '#f6ffed',
    '--list-item-hover': '#f0f9ff',
    '--list-item-active': 'rgba(82, 196, 26, 0.1)',
    '--list-item-active-border': 'rgba(82, 196, 26, 0.2)',

    // 代码块
    '--code-bg': '#f0f9ff',
    '--code-border': '#d9f7be',
    '--code-header-bg': '#f0f9ff',

    // 模态框
    '--modal-overlay': 'rgba(82, 196, 26, 0.3)',
    '--modal-shadow': '0 8px 32px rgba(82, 196, 26, 0.2)',

    // 表单元素
    '--input-bg': '#ffffff',
    '--input-focus-shadow': '0 0 0 3px rgba(82, 196, 26, 0.1)',
    '--select-bg': '#ffffff',

    // 成员管理
    '--member-item-bg': '#f0f9ff',
    '--member-role-bg': '#d9f7be',
    '--member-role-color': '#52c41a',

    // 按钮相关颜色
    '--btn-primary-bg': '#52c41a',
    '--btn-text-primary': '#ffffff',
    '--btn-primary-hover-bg': '#73d13d',
    '--btn-primary-disabled-bg': '#d9d9d9',
    '--btn-primary-disabled-color': '#bfbfbf',
    '--btn-secondary-bg': '#ffffff',
    '--btn-secondary-color': '#2f4f2f',
    '--btn-secondary-hover-bg': '#f6ffed',
    '--btn-secondary-hover-color': '#2f4f2f',
    '--btn-success-bg': '#52c41a',
    '--btn-success-color': '#ffffff',
    '--btn-success-hover-bg': '#73d13d',
    '--btn-warning-bg': '#faad14',
    '--btn-warning-color': '#ffffff',
    '--btn-warning-hover-bg': '#ffc53d',
    '--btn-error-bg': '#ff4d4f',
    '--btn-error-color': '#ffffff',
    '--btn-error-hover-bg': '#ff7875',

    // 玻璃效果
    '--primary-glass': 'rgba(82, 196, 26, 0.1)',
    '--primary-glass-hover': 'rgba(82, 196, 26, 0.2)',

    // 输入框相关
    '--input-border': '#d9f7be',
    '--input-focus-border': '#52c41a',
    '--input-disabled-bg': '#f6ffed',
    '--input-disabled-text': '#8a9a8a',

    // 悬浮状态颜色
    '--hover-bg': '#f6ffed',
    '--hover-border': '#52c41a',
    '--hover-shadow': '0 4px 12px rgba(82, 196, 26, 0.15)',
    '--hover-transform': 'translateX(4px)',
    '--hover-scale': '1.0',
  },
  european: {
    // 主色调 - 欧美风格主题使用深蓝紫色系
    '--primary-color': '#722ed1',
    '--primary-light': '#9254de',
    '--primary-dark': '#531dab',

    // 导航栏tab
    '--nav-parent-active': '#f0f0ff',
    '--nav-child-active': '#f8f8ff',

    // 背景色 - 欧美风格色系
    '--bg-primary': '#fafbff',
    '--bg-secondary': '#f0f2ff',
    '--bg-tertiary': '#e6e8ff',

    // 文字颜色
    '--text-primary': '#1a1a2e',
    '--text-secondary': '#4a4a6e',
    '--text-tertiary': '#7a7a9e',
    '--text-light': '#aaaaae',

    // 边框颜色
    '--border-color': '#e6e8ff',
    '--border-light': '#f0f2ff',

    // 阴影
    '--shadow-light': '0 2px 8px rgba(114, 46, 209, 0.1)',
    '--shadow-medium': '0 4px 16px rgba(114, 46, 209, 0.15)',
    '--shadow-heavy': '0 8px 32px rgba(114, 46, 209, 0.2)',

    // 卡片背景
    '--card-bg': '#ffffff',
    '--card-hover-bg': '#fafbff',
    '--card-error-bg': '#fff2f0',

    // 头部背景
    '--header-bg': '#fafbff',
    '--header-border': '#e6e8ff',

    // 侧边栏
    '--sidebar-bg': '#1a1a2e',
    '--sidebar-text': '#f0f2ff',
    '--sidebar-hover': '#722ed1',
    '--sidebar-border': 'rgba(255, 255, 255, 0.1)',
    '--sidebar-action-bg': 'rgba(255, 255, 255, 0.1)',
    '--sidebar-action-border': 'rgba(255, 255, 255, 0.2)',
    '--sidebar-action-hover': 'rgba(255, 255, 255, 0.2)',
    '--sidebar-badge-bg': 'rgba(255, 255, 255, 0.2)',
    '--sidebar-user-border': 'rgba(255, 255, 255, 0.2)',
    '--sidebar-user-hover': 'rgba(255, 255, 255, 0.1)',
    '--sidebar-user-text-secondary': 'rgba(255, 255, 255, 0.6)',

    // 状态颜色
    '--success-color': '#52c41a',
    '--warning-color': '#faad14',
    '--error-color': '#ff4d4f',
    '--info-color': '#1890ff',

    // API方法颜色
    '--api-get-bg': '#e6f7ff',
    '--api-get-color': '#1890ff',
    '--api-post-bg': '#f6ffed',
    '--api-post-color': '#52c41a',
    '--api-put-bg': '#fff7e6',
    '--api-put-color': '#fa8c16',
    '--api-delete-bg': '#fff2f0',
    '--api-delete-color': '#ff4d4f',

    // 表格和列表
    '--table-header-bg': '#f0f2ff',
    '--table-row-hover': '#f0f2ff',
    '--table-row-even': '#fafbff',
    '--list-item-hover': '#f0f2ff',
    '--list-item-active': 'rgba(114, 46, 209, 0.1)',
    '--list-item-active-border': 'rgba(114, 46, 209, 0.2)',

    // 代码块
    '--code-bg': '#f0f2ff',
    '--code-border': '#e6e8ff',
    '--code-header-bg': '#f0f2ff',

    // 模态框
    '--modal-overlay': 'rgba(114, 46, 209, 0.3)',
    '--modal-shadow': '0 8px 32px rgba(114, 46, 209, 0.2)',

    // 表单元素
    '--input-bg': '#ffffff',
    '--input-focus-shadow': '0 0 0 3px rgba(114, 46, 209, 0.1)',
    '--select-bg': '#ffffff',

    // 成员管理
    '--member-item-bg': '#f0f2ff',
    '--member-role-bg': '#e6e8ff',
    '--member-role-color': '#722ed1',

    // 按钮相关颜色
    '--btn-primary-bg': '#722ed1',
    '--btn-text-primary': '#ffffff',
    '--btn-primary-hover-bg': '#9254de',
    '--btn-primary-disabled-bg': '#d9d9d9',
    '--btn-primary-disabled-color': '#bfbfbf',
    '--btn-secondary-bg': '#ffffff',
    '--btn-secondary-color': '#1a1a2e',
    '--btn-secondary-hover-bg': '#fafbff',
    '--btn-secondary-hover-color': '#1a1a2e',
    '--btn-success-bg': '#52c41a',
    '--btn-success-color': '#ffffff',
    '--btn-success-hover-bg': '#73d13d',
    '--btn-warning-bg': '#faad14',
    '--btn-warning-color': '#ffffff',
    '--btn-warning-hover-bg': '#ffc53d',
    '--btn-error-bg': '#ff4d4f',
    '--btn-error-color': '#ffffff',
    '--btn-error-hover-bg': '#ff7875',

    // 玻璃效果
    '--primary-glass': 'rgba(114, 46, 209, 0.1)',
    '--primary-glass-hover': 'rgba(114, 46, 209, 0.2)',

    // 输入框相关
    '--input-border': '#e6e8ff',
    '--input-focus-border': '#722ed1',
    '--input-disabled-bg': '#fafbff',
    '--input-disabled-text': '#7a7a9e',

    // 悬浮状态颜色
    '--hover-bg': '#f0f2ff',
    '--hover-border': '#722ed1',
    '--hover-shadow': '0 4px 12px rgba(114, 46, 209, 0.15)',
    '--hover-transform': 'translateX(4px)',
    '--hover-scale': '1.0',
  },
};

// 当前主题状态
const currentTheme = ref<ThemeMode>('light');

// 从localStorage获取保存的主题
const savedTheme = localStorage.getItem('theme') as ThemeMode;
if (savedTheme && (savedTheme === 'light' || savedTheme === 'dark' || savedTheme === 'fresh' || savedTheme === 'european')) {
  currentTheme.value = savedTheme;
}

// 应用主题到CSS变量
const applyTheme = (theme: ThemeMode) => {
  const root = document.documentElement;
  const config = themeConfig[theme];

  Object.entries(config).forEach(([key, value]) => {
    root.style.setProperty(key, value);
  });

  // 设置data-theme属性
  root.setAttribute('data-theme', theme);

  // 保存到localStorage
  localStorage.setItem('theme', theme);
};

// 切换主题
const toggleTheme = () => {
  const newTheme = currentTheme.value === 'light' ? 'dark' : 'light';
  currentTheme.value = newTheme;
  applyTheme(newTheme);
};

// 设置主题
const setTheme = (theme: ThemeMode) => {
  currentTheme.value = theme;
  applyTheme(theme);
};

// 监听主题变化
watch(
  currentTheme,
  (newTheme) => {
    applyTheme(newTheme);
  },
  { immediate: true }
);

export function useTheme() {
  return {
    currentTheme,
    toggleTheme,
    setTheme,
    applyTheme,
  };
}
